<template>
  <div>
    <el-container>
      <el-header
        >后台管理系统
        <el-button
          plain
          :icon="isCollapse ? 'el-icon-circle-plus' : 'el-icon-remove'"
          size="mini"
          @click="isCollapse = !isCollapse"
        ></el-button>
        <div class="welcome">
          欢迎
          <span >{{ account }}</span>
          登陆
          <router-link to="/login">
          <el-button plain size="mini">退出登录</el-button>
        </router-link>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="1-4-1"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
          >
            <router-link to="/home/user"
              ><el-menu-item index="1">
                <i class="el-icon-user"></i>
                <span slot="title">用户管理</span>
              </el-menu-item>
            </router-link>

            <router-link to="/home/source"
              ><el-menu-item index="2">
                <i class="el-icon-s-cooperation"></i>
                <span slot="title">资源管理</span>
              </el-menu-item>
            </router-link>
            <router-link to="/home/rights"
              ><el-menu-item index="3">
                <i class="el-icon-lock"></i>
                <span slot="title">权限管理</span>
              </el-menu-item>
            </router-link>
            <router-link to="/home/finance"
              ><el-menu-item index="4">
                <i class="el-icon-wallet"></i>
                <span slot="title">金融管理</span>
              </el-menu-item>
            </router-link>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
          <!-- 路由出口放在哪里就显示在哪里 -->
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
export default {
  // mounted () {
  //   console.log(sessionStorage.getItem('account'))
  //   // this.$refs.account = sessionStorage.getItem('account')
  // },
  data () {
    return {
      isCollapse: false
    }
  },
  computed: {
    account () {
      return sessionStorage.getItem('account') // 使用计算属性把用户名取出来渲染上去
    }
  },
  methods: {}
}
</script>

<style scoped lang="scss">
html,
body {
  height: 100%;
}
.el-header {
  background-color: #b3c0d1;
  color: white;
  text-align: left;
  line-height: 60px;
  font-weight: bold;
  font-size: 30px;
}

.el-aside {
  width: 100%;
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
  height: 100%;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
  width: 100%;
}

body > .el-container {
  margin-bottom: 40px;
  height: 100% !important;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.welcome {
  float: right;
  width: 250px;
  height: 40px;
  font-size: 20px;
  span {
    color: yellow;
  }
  .el-button {
    margin-left: 10px;
    width: 100px !important;
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-vertical-demo[data-v-373c12f8]:not(.el-menu--collapse) {
  width: 200px;
  min-height: 10px;
}
.is-vertical {
  height: 100%;
}
.el-button{
  width: 50px !important;;
}
</style>
